<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery遍历方式</title>
    <script  src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">


        //遍历方式一定要分清是javascript对象还是jquery对象,他们之间的方法是不一样的。
        //js通常用innerHTML属性来获取里面的内容。
        //jquery通常用html()方法来获取元素标签体的内容，也可以利用text()来获取纯文本的内容。还有一个val()方法来获取input的val值


        $(function(){
            var city=$("#city li"); //Jquery对象

            //遍历方式1：转化成js对象进行遍历
            for(var i=0;i<city.length;i++){
            //    alert(city[i].innerHTML); //jquery对象转换成了js对象，可以利用js对象的innerHTML属性
            }

            //遍历方式2：直接利用jquery对象进行遍历,但返回的却是每一个js对象
            city.each(function(index,element){ //index代表其中的索引，element代表每一个元素对象
                //alert(index+"..."+element.innerHTML);
               // alert(index+"..."+$(element).html());
              // alert(index+"..."+$(this).html());
              //alert(index+"..."+this.innerHTML);
            });

            //遍历方式3：$.each(object,[callback]回调函数);
            $.each(city,function(index,element){
               // alert(index+".."+element.innerHTML);
            });

            //遍历方式4：for...of....     这是jquery3.0之后提供的版本
            for(li of city){
                alert(li.innerHTML);
            }

        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>南京</li>
    <li>武汉</li>
    <li>扬州</li>
</ul>
</body>
</html>